<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">


    <p:panel id="buscarPanel" >

        <f:facet name="header">Filtros Reutilizado</f:facet>


        <table>
            <!-- fila 1 y 2 -->
            <tr>
                <td>Email</td>
                <td>
                    <p:inputText id="email"
                                 value="#{bean.filtro.email}"  >

                        <p:ajax 
                            event="blur"
                            process="buscarPanel" 
                            update="buscarPanel tablausuarios" 
                            listener="#{bean.buscar()}"
                            global="false"/>

                    </p:inputText>
                </td>
                <td>Rut</td>
                <td>
                    <p:inputText id="rut"
                                 value="#{bean.filtro.rut}"
                                 converter="rutConverter"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p:message for="email" />
                </td>
                <td colspan="2">
                    <p:message for="rut" />
                </td>
            </tr>

            <!-- fila 3 y 4 -->
            <tr>
                <td>Perfil</td>
                <td>
                    <p:selectOneMenu id="rol" 
                                     value="#{bean.filtro.perfil}"
                                     converter="entityConverter">
                        <f:selectItem itemLabel="Seleccionar..." />
                        <f:selectItems value="#{bean.perfilList}" 
                                       var="p" 
                                       itemLabel="#{p.nombre}" 
                                       itemValue="#{p}" />

                        <p:ajax process="buscarPanel" 
                                update="buscarPanel tablausuarios" 
                                listener="#{bean.buscar()}"
                                global="false"/>

                    </p:selectOneMenu>
                </td>
                <td>F.Nac Desde</td>
                <td>
                    <p:calendar id="fnacdesde" 
                                value="#{bean.filtro.fechaNacDesde}" 
                                readonlyInput="true"
                                locale="es" 
                                navigator="true" 
                                pattern="dd/MM/yyyy" 
                                yearRange="-100:+0" 
                                showOn="button"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p:message for="rol" />
                </td>
                <td colspan="2">
                    <p:message for="fnacdesde" />
                </td>
            </tr>

            <!-- fila 5 y 6 -->
            <tr>
                <td>Estado</td>
                <td>
                    <p:selectOneMenu id="estado" 
                                     value="#{bean.filtro.estado}" >
                        <f:selectItem itemLabel="Seleccionar..." />
                        <f:selectItem itemLabel="Activo" itemValue="#{true}" />
                        <f:selectItem itemLabel="Inactivo" itemValue="#{false}" />
                    </p:selectOneMenu>
                </td>
                <td>F.Nac Hasta</td>
                <td>
                    <p:calendar id="fnachasta" 
                                value="#{bean.filtro.fechaNacHasta}" 
                                readonlyInput="true"
                                locale="es" 
                                navigator="true" 
                                pattern="dd/MM/yyyy" 
                                yearRange="-100:+0" 
                                showOn="button"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p:message for="estado" />
                </td>
                <td colspan="2">
                    <p:message for="fnachasta" />
                </td>
            </tr>

        </table>

        <f:facet name="footer">
            <p:commandButton id="btnBuscar" value="Buscar"
                             onclick="alert('aqui va el js para limpiar tabla')"
                             actionListener="#{bean.buscar}" 
                             process="buscarPanel" 
                             update="buscarPanel tablausuarios" />
        </f:facet>

    </p:panel>

</ui:composition>
